<template>
  <view class="new-or-edit-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">指派任务</view>
        </view>
        <!-- uview-plus的表单，包含标题，公告内容，单选是否弹窗推送，状态下拉，确认按钮 -->
        <up-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef">
          <up-form-item labelWidth="100" label="巡检员" prop="remark">
            <up-input v-model="formModel.remark" placeholder="请输入巡检员" />
          </up-form-item>
          <up-form-item labelWidth="100" label="备注" prop="remark">
            <up-input v-model="formModel.remark" placeholder="请输入备注" />
          </up-form-item>
        </up-form>
      </view>

      <view class="modal-footer">
        <up-button type="primary" @click="submit">确认</up-button>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
const formRef = ref(null);
defineOptions({ name: "ApplyModal" });

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

const formModel = ref(createDefaultModel());
/**
 * 数据模型
 * 是否属实单选框
 * 备注文本框
 * 上传图片
 */
function createDefaultModel() {
  return {
    isTrue: '',
    remark: '',
    images: [],
  };
}
const rules = reactive({
  isTrue: [{ required: true, message: '请选择是否属实', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  images: [{ required: true, message: '请上传图片', trigger: 'blur' }],
})

const submit = async () => {
  console.log(formModel.value);
  await formRef.value.validate();
}

// 定义方法  
function open() {
  show.value = true;
}

function close() {
  // 关闭逻辑，设置 show 为 false  
  show.value = false;
}  
</script>

<style scoped lang="scss">
.new-or-edit-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .modal-content {
    padding: 20rpx;
  }
}
</style>
